<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>导航主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>导航自定义颜色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>文字固定颜色，如果设置则会固定整个导航条文字颜色。格式#fff</view>
			</view>
			<view class="tr">
				<view>bgImage</view>
				<view>String</view>
				<view>无</view>
				<view>背景图，填入url</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>导航标题，可使用vi_pageTitle 变量从mixin取页面预设标题</view>
			</view>
			<view class="tr">
				<view>titleClass</view>
				<view>String</view>
				<view>无</view>
				<view>导航标题样式名，只对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>leftClass</view>
				<view>String</view>
				<view>无</view>
				<view>左侧内容框样式名</view>
			</view>
			<view class="tr">
				<view>rightClass</view>
				<view>String</view>
				<view>无</view>
				<view>右侧内容框样式名</view>
			</view>
			<view class="tr">
				<view>centerClass</view>
				<view>String</view>
				<view>无</view>
				<view>中部内容框样式名，slot外层</view>
			</view>
			<view class="tr">
				<view>fixed</view>
				<view>Boolean</view>
				<view>true</view>
				<view>导航是否固定屏幕顶部</view>
			</view>
			<view class="tr">
				<view>statusPlace</view>
				<view>Boolean</view>
				<view>true</view>
				<view>手机顶部状态栏占位</view>
			</view>
			<view class="tr">
				<view>goback</view>
				<view>Boolean</view>
				<view>false</view>
				<view>启用返回按钮</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>101</view>
				<view>手动指定层级数</view>
			</view>
			<view class="tr">
				<view>appletFix</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标题栏小程序适配，开启后标题栏右侧缩减100px，避免共享按钮遮挡。注意居中问题</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>back：icon-arr-left 返回</view>
				</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{"&lt;vi-headbar>\{\{vi_pageTitle\}\}&lt;/vi-headbar>"}}
			</view>
			<view class="py-sm">
				<vi-headbar :fixed="false">
					<view slot="left">左内容</view>
					使用slot=left 或 right
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar type="second" :fixed="false">
					<view slot="left">左内容</view>
					第二主题色 type=second
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar type="third" :fixed="false">
					<view slot="left">左内容</view>
					第三主题色 type=third
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar type="fourth" :fixed="false">
					<view slot="left">左内容</view>
					第四主题色 type=fourth
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar type="fifth" :fixed="false">
					<view slot="left">左内容</view>
					第五主题色 type=fifth
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar bgImage="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.968zy.com%2Fcontent%2Ftemplates%2Fmeta%2FStatic%2Fimages%2Fbj.png&refer=http%3A%2F%2Fwww.968zy.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650507866&t=6bee6a3df077202ceff81c49ff5c6cf2" :fixed="false">
					<view slot="left">左内容</view>
					背景图 bgImage=xxxx
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
			<view class="py-sm">
				<vi-headbar :fixed="false" goback>
					<view slot="left">左内容</view>
					开启返回按钮 goback=true
					<view slot="right">右内容</view>
				</vi-headbar>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
